<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			height: 2000px;
		}

		.back2top {
			width: 50px;
			height: 50px;
			background-color: red;
			position: fixed;
			right: 10px;
			bottom: 10px;
			display: none;
		}
	</style>

	<!-- <script src="js/helper.js"></script> -->
	<script>

// 		window.onload = function() {

// 			var body = document.body;

// 			body.onclick = function(e) {
// 				console.log(e.clientX + ':' + e.clientY);
// 				console.log(e.pageX + ':' + e.pageY);
// 			};

// 			var myText = Helper.dom('myText');

// 			myText.onkeyup = function(e) {
// //				console.log(e.keyCode);
// 			};

			 /*myText.onblur = function() {
				console.log('blur');
			};

			myText.onfocus = function() {
				console.log('focus');
			};*/

			/*myText.onchange = function() {
				console.log(this.value);
			};*/

		// };

		//////////////////////////////////////////////////////////////////

		/*window.onload = function() {
			var myBtn = document.getElementById('myBtn');
			// console.log(myBtn)
		}

		window.onresize = function() {
			var w = window.innerWidth;
			var h = window.innerHeight;

			console.log(w + '-' + h);
		}

		window.onscroll = function() {
			// console.log(document.body.scrollTop);
		}*/

		/////////////////////////////////////////////////

//		window.onload = function() {
//			var myBtn2 = Helper.dom('myBtn2');
//
////			console.log(myBtn2);
//
//			myBtn2.onclick = function() {
//				alert(999);
//			};
//
//		};

		/*window.onhashchange = function() {
			console.log(9999);
		};*/

//		window.onresize = function() {
//			console.log(window.innerWidth);
//		};

//		window.onscroll = function() {
//			console.log(document.body.scrollTop);
//		};


	</script>
</head>
<body>

	<input type="text" id="myTxt">

	<hr>

    <!--<button onclick="alert(99)">my button</button>-->
    <button id="myBtn2">my btn2</button>

    <hr>

    <input id="myText" type="text">

	<div id="back2Top" class="back2top"></div>


	<!-- <button onclick="window.alert(99)">my btn</button> -->
	<!-- <button onclick="test()">my btn</button> -->
	<!--<button id="myBtn">my Btn</button>-->
	<!--<button id="myBtn2">解除绑定</button>-->

	<!--<hr>-->

	<!--<input id="myTxt" type="text">-->

	<!--<select name="" id="mySel">-->
		<!--<option value="1">item1</option>-->
		<!--<option value="2">item2</option>-->
		<!--<option value="3">item3</option>-->
		<!--<option value="4">item4</option>-->
		<!--<option value="5">item5</option>-->
	<!--</select>-->

    <!--<script src="js/helper.js"></script>-->
	<script>

	window.onload = function() {
		alert('load');
	}

	var myTxt = document.getElementById('myTxt');
	myTxt.onchange = function() {

		alert(this.value)

	};

	///////////////////////////////////

	var myBtn2 = document.getElementById('myBtn2');
	var myText = document.getElementById('myText');

	myBtn2.onclick = function() {
		alert(99);
	}

	myText.onblur = function() {
		console.log('blur');
	}

	/////////////////////////////////////////////////////////////////

        /*var myBtn2 = Helper.dom('myBtn2');
        var myText = Helper.dom('myText');

		myBtn2.onclick = function() {
			alert(99);
		};*/

//        myText.onkeyup = function() {
//            console.log(this.value);
//        };

//        myBtn2.onmouseover = function() {
//            console.log('over');
//        };
//
//        myBtn2.onmouseout = function() {
//            console.log('out');
//        };

//        myBtn2.onmousedown = function() {
//            console.log('down');
//        };
//
//        myBtn2.onmouseup = function() {
//            console.log('up');
//        };

//        myBtn2.ondblclick = function() {
//            alert(678);
//        };

//        myBtn2.addEventListener('click', function() {  // event handler
//            alert(66);
//        }, false);
//
//        myBtn2.onclick = test;
//
////        myBtn2.onclick = function() {
////            alert(88);
////        };
//
//        function test() {
//            alert(77);
//        }

        //////////////////////////////////////////////////////////////////
		// 返回顶部
// 		 var back2Top = document.getElementById('back2Top');
// 		 var timer;
// 		 back2Top.onclick = function() {
// 		 	// document.body.scrollTop = 0;
// 		 	timer = setInterval(function() {
// 		 		document.body.scrollTop -= 100;
// 		 		if (document.body.scrollTop <= 0) {
// 		 			clearInterval(timer);
// 		 		}
// //		 		console.log(8)
// 		 	}, 10);
// 		 };

// 		window.onscroll = function() {
// 			var st = document.body.scrollTop;
// 			var h = window.innerHeight; // ??
// 			if (st > h) {
// 				back2Top.style.display = "block";
// 			} else {
// 				back2Top.style.display = "none";
// 			}
// 		};


//		var myBtn = document.getElementById('myBtn');
//		var myBtn2 = document.getElementById('myBtn2');
		// var myTxt = document.getElementById('myTxt');
		// var mySel = document.getElementById('mySel');

//		var test = function() {
//			alert(789);
//		}
//
//		myBtn.addEventListener('click', test, false);
//
//		myBtn2.addEventListener('click', function() {
//			myBtn.removeEventListener('click', test);
//		}, false);

		// myTxt.onkeyup = function() { // onkeydown
		// 	console.log(this.value)
		// };

		// myBtn.onmouseover = function() {
		// 	this.style.backgroundColor = 'red';
		// };

		// myBtn.onmouseout = function() {
		// 	this.style.backgroundColor = '';
		// };

		// mySel.onchange = function() {
		// 	console.log(this.value)
		// };

		// myTxt.onchange = function() {
		// 	console.log(this.value)
		// };

		// myBtn.onclick = function(e) {
		// 	// console.log(e);
		// 	alert(66);
		// };

		// myBtn2.onclick = function(e) {
		// 	myBtn.onclick = null;
		// };

		// var onBtnClick = function() {
		// 	alert(22);
		// };

		// myBtn.onclick = onBtnClick; // on_btn_click

		

		// myBtn.onmouseout = function() {
		// 	alert('abc');
		// }

		/*myTxt.onkeyup = function() {
			console.log('key up: ' + this.value);
		}

		myTxt.onkeydown = function() {
			console.log('key down: ' + this.value);
		}*/

		// window.onload = function() {
		// 	console.log('load');
		// };

		/*window.onresize = function() {
			console.log('resize');
		}*/

		// window.onscroll = function() {
		// 	console.log('scroll');
		// }

		// var test = function() {
		// 	alert(77)
		// 	// return function() {
		// 	// 	alert(66);
		// 	// }
		// };

		/*myBtn.onclick = test();*/

		/*myBtn.addEventListener('click', function() {
			alert(55);
		}, false);*/

	</script>
</body>
</html>